<template>
	<label class="ui-radio" :style="style" @click.prevent="set(true)" :class="[classname,checkedClass,disabledClass]">
		<span class="ui-radio-block"><span class="ui-radio-selected"></span></span>
		<slot></slot>
		<input type="radio" :name="name" v-model="value" class="ui-sys-radio"/>
	</label>
</template>

<script>
	/*
	组件属性[
		value:value值
		style:自定义样式
		class:自定义class
		name:name属性
		disabled：是否交互 true/false
		checked:选中状态 true/false
		rules:用于表单验证
				[
					empty:[true/false,"提示信息"],
					int:[true/false,"提示信息"],
					min:[200,"提示信息"],
					...
				]

	]
	组件自定义事件[
		change:选项发生改变时回调的父组件，callback(obj[当前实例])
	]
	*/
	export default{
		props:{
			"value":{type:null,type:""},
			'style':{type:null,default:""},
			'classname':{type:null,default:""},
			'name':{type:null,default:""},
			'checked':{type:Boolean,default:false},
			'disabled':{type:Boolean,default:false},
			'callback':{type:null,default:false},
			'rules':{type:Array,default:[]},
		},
		data(){
			return {
				uiType:"ui-radio",
				disabledClass:this.disabled?"disabled":"",
			}
		},
		computed:{
			checkedClass(){
				this.$emit('change',this);//回调
				if(this.checked){
					return "on";
				}else{
					return "";
				}
			}
		},		
		methods:{			
			set(ison){
				if(!this.disabled){
					if(this.$parent.uiType && this.$parent.uiType=="ui-radio-group"){
						this.$parent.set(this);
					}else this.checked=ison;
				}
			}
		}
	}
</script>
